<!--
unfold: 点击了折叠图表
 -->
<template>
  <div :class='$style.wrap'>
    <div :class='$style.title'>
      <div :class='[$style.NO, {[$style.NO1]: index === 1}, {[$style.NO2]: index === 2}, {[$style.NO3]: index === 3}]'>{{index}}</div>
      <!-- <img :src='"~assets/images/no" + index + "_2x.png"' v-if=' 1 <= index && index <= 3'> -->
      <!-- <span v-else :class='$style.index' v-text='index'></span> -->
      <span :class='$style.text' v-text='titleFirst' @click='toDetail(titleFirst, codeFirst)'></span>
      <span :class='$style.vs'>VS</span>
      <span :class='$style.text' v-text='titleSecond' @click='toDetail(titleSecond, codeSecond)'></span>
    </div>
    <div :class='$style.similar'>相似度<span :class='$style.precent' v-text='similarity'></span><img src="~assets/images/unfold.png" :class='$style.arrow + " " + (unfold ? $style.packup: "")' @click='onUnfold'/></div>
  </div>
</template>

<style lang="less" module>
.wrap{
  display: flex;
  padding: 22px 30px;
  align-items: center;
  background-color: #fff;
  .title{
    flex: 1;
    text-align: left;
    display: flex;
    align-items: center;
    // img{
    //   width: 38px;
    //   margin-right: 20px;
    // }
    .NO{
      background:#cccccc;
      border-radius:4px;
      width:36px;
      height:36px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      margin-right: 16px; 
      // font-weight: bold;
      // box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.05) inset, -1px -1px 5px 0px rgba(0,0,0,0.05) inset;
    }
    .NO1{
      background-color: #ff8420;
    }
    .NO2{
      background-color: #6e869e;
    }
    .NO3{
      background-color: #30afe5;
    }
    .text{
      font-size: 32px;
      color: #222;
    }
    .vs{
      font-size: 32px;
      font-weight: 900;
      text-align: center;
      font-style: italic;
      color: #eb333b;
      margin: auto 26px;
      opacity: 0.7;
    }
  }
  .similar{
    font-size: 24px;
    color: #999;
    .precent{
      color: #ff8420;
      font-size: 32px;
      margin-left: 10px;
    }
    .arrow{
      width: 45px;
      vertical-align: middle;
      margin-left: 10px;
    }
    .packup{
      transform: rotate(180deg);
    }
  }
}
</style>
<script>
  export default {
    props: {
      titleFirst: {
        type: String,
        default: ''
      },
      codeFirst: String,
      codeSecond: String,
      titleSecond: {
        type: String,
        default: ''
      },
      similarity: {
        type: String,
        default: ''
      },
      unfold: {
        type: Boolean,
        default: true
      },
      index: {
        type: Number,
        default: 1
      },
      isShare: Boolean
    },
    data () {
      return {
      }
    },
    methods: {
      toDetail (stockName, stockCode) {
        if (this.isShare) return
        this.$router.push({path: '/stock', query: {stockName: stockName, stockCode: stockCode}})
      },
      onUnfold () {
        this.$emit('unfold')
      }
    }
  }
</script>
